<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:fn="http://java.sun.com/jsp/jstl/functions"
	xmlns:p="http://primefaces.org/ui">
	<h:form id="cartForm" prependId="false">
		<h:panelGrid style="text-align:center;cursor:pointer;" id="hdrCart">
			<h:panelGrid columns="2">
				<h:graphicImage value="/images/small-cart.jpg" />
				<h:panelGrid>
					<h:outputText value="Checkout Basket " />
					<h:panelGrid columns="2">
						<h:outputLabel value="#{fn:length(cart.cartItemsList)} Items"
							style="font-weight:bold" />
						<h:outputText value="Rs. #{cart.subTotal }" />
					</h:panelGrid>
				</h:panelGrid>
			</h:panelGrid>
		</h:panelGrid>
		<p:overlayPanel id="imgPanel" for="hdrCart" howCloseIcon="true">

			<p:panel id="cartPnlSmall" header="Basket" widgetVar="panel">

				<p:ajax event="toggle" listener="#{cart.toggle}" />
				<h:panelGrid columns="3" style="text-align:center;">

					<h:outputText value="There are " />
					<h:outputLabel value="#{fn:length(cart.cartItemsList)} Items"
						style="font-weight:bold" />
					<h:outputText value="  in your Basket" />
				</h:panelGrid>
				<p:dataList value="#{cart.cartItemsList}" var="items"
					type="definition" rendered="#{fn:length(cart.cartItemsList) gt 0}"
					styleClass="cart-dataList" id="cartItemsGridSmall">
					<h:panelGrid columns="2">
						<div >#{items.qty} x
							#{items.itemName}( #{items.size}) #{items.price }</div>
						<div style="width: 10%;">
							<p:commandButton title="Remove " icon="cart-remove-button"
								update=":cartForm" action="#{cart.removeFromCart }"
								styleClass="ui-button" style="float:right;">
								<f:setPropertyActionListener value="#{items}"
									target="#{cart.selectedCartDTO}" />
							</p:commandButton>
						</div>
					</h:panelGrid>
					<p:separator />
				</p:dataList>

				<h:panelGrid columns="2" styleClass="cart-smallGrid">
					<h:outputLabel value="Shipping:" styleClass="cart-smallGridText" />
					<h:outputText value="#{cart.shippingCharges}"
						styleClass="cart-smallGridPrice" />
					<h:outputLabel value="Sub Total:" styleClass="cart-smallGridText" />
					<h:outputText value="#{cart.subTotal }"
						styleClass="cart-smallGridPrice" />
					<h:outputLabel value="Total:" styleClass="cart-smallGridText" />
					<h:outputText value="#{cart.total }"
						styleClass="cart-smallGridPrice" />
					<h:panelGrid columns="2" style="float:right;">
						<p:commandButton value="Check out" styleClass="ui-button"
							rendered="#{fn:length(cart.cartItemsList) gt 0}"
							action="#{cart.proceedToCheckOut }"></p:commandButton>
					</h:panelGrid>
				</h:panelGrid>
			</p:panel>
		</p:overlayPanel>
	</h:form>
</ui:composition>